<template>
  <div>
    <div class="flex_wrap" style="justify-content: center;border:1px solid #f2f2f2;padding:0.4rem 0">
      <!-- <mt-button type="default" @click="thisWeek"  size="small" >本周</mt-button> -->
      <input class="date_pick" style="margin:0px 0.3rem" v-for="(student,index) in useInfo.studentList" v-if="student.checked" v-model="student.studentName" readonly  />
      <input class="date_pick" style="margin:0px 0.3rem" @click="openPicker" v-model="searchDate" readonly  />
      <!-- <mt-button type="default" @click="thisMonth"  size="small" >本月</mt-button> -->
    </div>
    <Calendar
    ref="Calendar"
    v-on:changeMonth="changeMonth"
    v-on:choseDay="dayChange"
    v-on:isToday="dayChange"
    :markDateMore="dateArr" 
     isHideOtherday=true  
  ></Calendar>
    <!-- <vue-event-calendar class="dyChooseDate" :events="demoEvents" @day-changed="dayChange" @month-changed="monthChange"></vue-event-calendar> -->
    <div v-if="healthType" class="bar"></div>
    <div v-if="healthType" class="test_row flex" style="line-height:0.5rem;">
    <div style="margin-right:1rem;color:#f8a600;" >{{Today.date}}</div> <label style="margin-right:0.3rem;">体温：{{Today.temperature}} </label>     <label v-if="Today.temperature=='发烧'"> 度数：{{Today.feverNum/10}}℃</label>
    </div>
    <div class="bar"></div>
    <div v-if="healthType" class="flex_column test_row">
        <div style="color:#058cff;margin-bottom:0.2733rem">本月</div>
        <div>
        <span>本月测量次数：{{dateArr.length}}次 &nbsp;&nbsp; 正常{{qiandaolength}}次 &nbsp;&nbsp; 发烧:{{qingjialength}}次</span>
        </div>
    </div>
    <div v-if="markSort" class="flex_column test_row">
        <div style="color:#058cff;margin-bottom:0.2733rem">本月</div>
        <div>
        <span>本月考勤次数：{{dateArr.length}}次 &nbsp; 签到{{qiandaolength}}次 &nbsp; 请假:{{qingjialength}}次</span>
        </div>
    </div>
    <mt-datetime-picker v-model='dateFromDate' class="no_date" ref="fromDatepicker" type="date" year-format="{value} 年" month-format="{value} 月"
    date-format="{value}" @confirm="sureMonth(dateFromDate)" :endDate='new Date()'>
    </mt-datetime-picker>
      <!-- <img src="../../static/images/312.png" style="width:100%;"></img> -->
    </div>
  </div>
</template>
<script>
    import Calendar from 'vue-calendar-component';
    export default {
        data() {
            return {
                demoEvents: [],
                dateArr: [{
                    date: '2018/4/1',
                    className: "normal"
                }, {
                    date: '2018/4/13',
                    className: "no_normal"
                }],
                selected: '1',
                qiandaolength: 0, //存储签到次数
                qingjialength: 0, //存储请假次数
                dateFromDate: new Date(), //过度用日期,无实际作用
                url: '',
                useInfo: {},
                studentId: '',
                Today: {
                    temperature: '正常',
                    feverNum: '',
                    date: '今天'
                },
                duringMonth: {
                    testCount: '38',
                    formalCount: '18',
                    feverCount: '20'
                },
                searchDate: new Date().Format('yyyy-MM'),
                slots: [{
                    flex: 1,
                    values: ['2017', '2018'],
                    className: 'slot1',
                    textAlign: 'right'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                }, {
                    flex: 1,
                    values: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                    className: 'slot2',
                    textAlign: 'left'
                }],
                cancelText: '取消',
                confirmText: '确定'
            }
        },
        components: {
            Calendar,
        },
        props: ['markSort', 'show', 'healthType'],
        created() {
            this.getUserInfo();
            if (this.show) {
                this.getList();
            }
        },
        watch: {
            show(newValue) {
                if (newValue) {
                    this.getList();
                }
            }
        },
        methods: {
            formatType(type) {
                switch (type) {
                    case 1: //签到
                        return 'normal';
                        break;
                    case 2: //请假
                        return 'no_normal';
                        break;
                    case 3: //旷课
                        break;
                }

            },
            changeMonth(date) {
                this.searchDate = new Date(date).Format('yyyy-MM');
                this.dateFromDate = new Date(date).Format('yyyy-MM-dd');
                this.getList();
            },
            formatFever(temperatureType) {
                if (temperatureType == '1') {
                    return 'no_normal';
                } else if (temperatureType == '0') {
                    return 'normal';
                }
            },
            formatFeverType(temperatureType) {
                console.log('temperatureType', temperatureType)
                if (temperatureType == '1') {
                    return '发烧';
                } else if (temperatureType == '0') {
                    return '正常';
                }
            },
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
                this.useInfo.studentList.forEach(o => {
                    if (o.checked) {
                        this.studentId = o.studentId;
                    }
                })
            },
            thisWeek() { //本周

            },
            thisMonth() { //本月

            },
            //选择日期
            dayChange(day) {
                console.log('123', day);
                this.Today = {
                    temperature: '未测量',
                    feverNum: '',
                    date: day
                }
                this.dateArr.forEach(o => {
                    if (day == o.date) {
                        this.Today = o
                    }
                })

            },
            //打开弹窗
            openPicker() {
                this.$refs.fromDatepicker.open();
            },
            getList() { //获取数据
                var params = {
                    userId: this.useInfo.userId,
                    markTime: this.searchDate + '-01',
                    schoolId: this.useInfo.schoolId,
                    markSort: this.markSort,
                    healthType: this.healthType,
                    studentId: this.studentId,
                    createTime: this.searchDate + '-01',
                }

                if (this.markSort) {
                    this.url = 'mark/selectData';
                }
                if (this.healthType == 1) {
                    this.url = 'health/selectTempList';
                } else if (this.healthType) {
                    this.url = 'health/selectHelrList'
                }
                // this.$EventCalendar.toDate(new Date(this.searchDate + '-01').Format('yyyy/MM/dd'));
                this.$api.post(this.url, params, data => {
                    var qingjialength = 0;
                    var qiandaolength = 0;
                    this.$set(this, 'dateArr', data.info.map(o => {
                        let obj = {};
                        if (o.markFlag) {
                            obj = {
                                date: new Date(o.markTime).Format('yyyy/M/d'),
                                className: this.formatType(o.markFlag)
                            }
                            if (o.markFlag == 1) {
                                qiandaolength++
                            }
                            if (o.markFlag == 2) {
                                qingjialength++
                            }
                        } else if (this.healthType) {
                            if ((new Date(o.createTime).Format('yyyy/MM/dd')) == (new Date().Format('yyyy/MM/dd'))) {
                                var Today = {
                                    temperature: this.formatFeverType(o.temperatureType),
                                    feverNum: o.feverNum,
                                    date: '今天'
                                };

                                this.Today = Today;
                            }
                            if (o.temperatureType == '1') {
                                qingjialength++
                            } else {
                                qiandaolength++
                            }
                            obj = {
                                date: new Date(o.createTime).Format('yyyy/M/d'),
                                temperature: this.formatFeverType(o.temperatureType),
                                feverNum: o.feverNum,
                                className: this.formatFever(o.temperatureType),
                            }
                        }
                        return obj;
                    }))
                    this.qiandaolength = qiandaolength;
                    this.qingjialength = qingjialength;
                })
            },
            //改变月数
            sureMonth(dateFromDate) {
                // let dateStr = arr[0] + '/' + arr[1] + '/1';
                // let dateStr = arr[0] + '/' + arr[1] + '/1';
                // this.searchDate = arr[0] + '-' + arr[1];
                // this.$EventCalendar.toDate(dateStr);
                this.$refs.Calendar.ChoseMonth(new Date(dateFromDate).Format('yyyy-MM-dd'), false);
                this.searchDate = new Date(dateFromDate).Format('yyyy-MM');
            },
        }
    }
</script>
<style scoped>

</style>
</style>